<template>
    <div class="content">
        <!-- 新增对话框 -->
        <el-dialog title="编辑房屋" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" class="dialog">
            <h2 class="dialog-title">
                基础信息
            </h2>
            <el-form ref="form" :inline="true" :model="form" label-width="80px">
                <el-form-item label="楼栋" prop="building" :rules="{ required: true, message: '楼栋不能为空', }">
                    <el-select v-model="form.building" placeholder="请选择">
                        <el-option v-for="(item, index) in build" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单元" :rules="{ required: true, message: '单元不能为空' }" prop="unit">
                    <el-select v-model="form.unit" placeholder="请选择">
                        <el-option v-for="(item, index) in unit" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼层" :rules="{ required: true, message: '楼层不能为空' }" prop="floor">
                    <el-select v-model="form.floor" placeholder="请选择">
                        <el-option v-for="(item, index) in floor" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间号" :rules="{ required: true, message: '房间号不能为空' }" prop="roomNumber">
                    <el-select v-model="form.roomNumber" placeholder="请选择">
                        <el-option v-for="(item, index) in room" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="户主" :rules="{ required: true, message: '户主不能为空' }" prop="owner">
                    <el-input v-model="form.owner"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :rules="[
                    { required: true, message: '手机号不能为空' },
                    { message: '请输入正确的手机号', pattern: /^1[3-9]\d{9}$/, trigger: ['blur', 'change'] }
                ]" prop="phoneNumber">
                    <el-input v-model="form.phoneNumber"></el-input>
                </el-form-item>
            </el-form>
            <div class="btn">
                <!-- <el-button type="primary" @click="onSubmit('form')">立即创建</el-button> -->
                <el-button @click="handleClose">取消</el-button>
                <BlueBtn @click.native="onSubmit('form')">确定</BlueBtn>

            </div>
        </el-dialog>
        <!-- 查看住户对话框 -->
        <el-dialog title="查看详情" :visible.sync="dialogFormVisible" width="40%">
            <el-form :model="infoForm" :inline="true" disabled label-width="100px">
                <el-form-item label="楼栋">
                    <el-input v-model="infoForm.build" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单元">
                    <el-input v-model="infoForm.unit" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="楼层">
                    <el-input v-model="infoForm.floor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="房间号">
                    <el-input v-model="infoForm.room" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证类型">
                    <el-input v-model="infoForm.cardType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="证件号">
                    <el-input v-model="infoForm.cardID" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="添加时间">
                    <el-input v-model="infoForm.addDate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="添加人">
                    <el-input v-model="infoForm.addMan" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <div class="top">
            <ul class="top-ipt">
                <li>
                    <SelectIpt :lists="state" ref="state">
                        <p>状态</p>
                    </SelectIpt>
                </li>
                <li>

                    <SelectIpt :lists="build" ref="build">
                        <p>楼栋</p>
                    </SelectIpt>
                </li>
                <li>

                    <SelectIpt :lists="unit" ref="unit">
                        <p>单元</p>
                    </SelectIpt>
                </li>
                <li>

                    <SelectIpt :lists="floor" ref="floor">
                        <p>楼层</p>
                    </SelectIpt>
                </li>
                <li>

                    <SelectIpt :lists="room" ref="room">
                        <p>房号</p>
                    </SelectIpt>
                </li>

            </ul>
            <div class="top-btn">
                <BlueBtn @click.native="query">查询</BlueBtn>
                <el-button @click="rest">一键重置</el-button>
                <BlueBtn @click.native="add">新增</BlueBtn>
                <!-- <BlueBtn>导入</BlueBtn> -->
                <excel-json :data="OwnerRoom" :fields="fields" name="download.xls">
                    <BlueBtn>导出</BlueBtn>
                </excel-json>
                <BlueBtn>房屋配置</BlueBtn>
                <RedBtn>批量删除</RedBtn>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom-menu">
                <p class="menu">房屋结构</p>
                <el-tree :data="data" :props="defaultProps" default-expand-all></el-tree>
            </div>
            <div class="bottom-table">
                <div class="table-title">
                    <div class="table-item">
                        <p>位置</p>
                        <p>城市花园</p>
                    </div>
                    <div class="table-item">
                        <p>总户数(户)</p>
                        <p>{{ householdCount }}</p>
                    </div>
                    <div class="table-item">
                        <p>已入住(户)</p>
                        <p>{{ moveInCount }}</p>
                    </div>
                    <div class="table-item">
                        <p>未入住(户)</p>
                        <p>{{ moveCount }}</p>
                    </div>
                    <div class="table-item">
                        <p>入住人数(人)</p>
                        <p>{{ allData.length - moveCount }}</p>
                    </div>
                </div>
                <el-table ref="multipleTable"
                    :data="isShow ? OwnerRoom.slice(pages, pages + 8) : filterRoom.slice(pages, pages + 8)"
                    tooltip-effect="dark" @selection-change="handleSelectionChange" border>
                    <el-table-column type="selection" width="85"> </el-table-column>
                    <el-table-column type="index" width="50" label="序号">
                    </el-table-column>
                    <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop"
                        :label="column.label" :width="column.width || null">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                            <!-- <el-button size="mini" @click="handleLook(scope.$index, scope.row)">查看用户</el-button> -->
                            <el-button size="mini" @click="handleInfo(scope.$index, scope.row)">详情</el-button>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <div class="total-page">
                        <p>共<span>{{ filterRoom.length == 0 ? Math.ceil(OwnerRoom.length / 8) :
                            Math.ceil(filterRoom.length /
                                8) }}</span>页/<span>{{ filterRoom.length == 0 ? OwnerRoom.length :
                                    filterRoom.length }}</span>条数据
                        </p>
                    </div>
                    <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=8
                        :current-page.sync=page :total="filterRoom.length == 0 ? OwnerRoom.length : filterRoom.length"
                        hide-on-single-page>
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import BlueBtn from '@/components/BlueBtn.vue';
import GreenBtn from '@/components/GreenBtn.vue';
import RedBtn from '@/components/RedBtn.vue';
import { mapActions, mapState } from 'vuex';
import Excel from 'vue-json-excel'
export default {
    components: {
        SelectIpt,
        RedBtn,
        GreenBtn,
        'excel-json': Excel,
        BlueBtn
    },
    data() {
        return {
            //查看详情
            infoForm: {
                build: '',
                unit: '',
                floor: '',
                room: '',
                cardType: '',
                cardID: '',
                addDate: '',
                addMan: '',
            },
            //用于判断显示那个数据
            isShow: true,
            //当前
            page: 1,
            //page
            pages: 0,
            dialogFormVisible: false,
            fields: { "楼栋": 'BuildingName', '单元': 'UnitName', '楼层': 'FloorNumber', '房屋': 'RoomNumber','面积':'Area','户主':"Owner",'手机号':'Phone','状态':'Status' },
            dialogVisible: false, // 控制对话框的显示与隐藏
            form: {
                building: '',
                unit: '',
                floor: '',
                roomNumber: '',
                owner: '',
                phoneNumber: '',
            },
            //状态
            state: [
                "已入住", "未入住"
            ],
            //楼栋
            build: ['楼栋A', '楼栋B', '楼栋C', '楼栋D'],
            //单元
            unit: ['1单元', '2单元', '3单元'],
            //楼层
            floor: ['一层', '二层', '三层'],
            //房间
            room: ['101', '102', '201', '202', '301', '302'],
            data: [{
                id: 1,
                label: '城市花园',
                children: [{
                    id: 2,
                    label: '1栋',
                    children: [{
                        id: 3,
                        label: '1层',
                        children: [{
                            id: 4,
                            label: "101",
                        }]
                    }, {
                        id: 5,
                        label: '2层',
                        children: [{
                            id: 6,
                            label: "201",
                        }]
                    }]
                }, {
                    id: 7,
                    label: '2栋',
                    children: [{
                        id: 8,
                        label: '1层',
                        children: [{
                            id: 9,
                            label: "101",
                        }]
                    }, {
                        id: 10,
                        label: '2层',
                        children: [{
                            id: 11,
                            label: "201",
                        }]
                    }]
                }, {
                    id: 12,
                    label: '3栋',
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableColumns: [
                // { prop: 'RoomID', label: '序号', width: 70, },
                { prop: 'BuildingName', label: '楼栋', width: 100 },
                { prop: 'UnitName', label: '单元', width: 100 },
                { prop: 'FloorNumber', label: '楼层', width: 100 },
                { prop: 'RoomNumber', label: '房屋', width: 100 }, // 更改为 RoomNumber 以匹配数据
                { prop: 'Area', label: '面积', width: 100 },
                { prop: 'Owner', label: '户主', width: 140 }, // 更改为 Owner 以匹配数据
                { prop: 'Phone', label: '手机号', width: 170 }, // 更改为 Phone 以匹配数据
                { prop: 'Status', label: '状态', width: 120 } // 更改为 Status 以匹配数据，虽然之前注释中提到不一致，但这里应该是 Status
            ],
            multipleSelection: [],
            //过滤的数据
            filterRoom: []
        }
    },
    methods: {
        //get 当前页
        getPage(page) {
            this.pages = 8 * (page - 1)
        },
        //点击添加
        add() {
            this.dialogVisible = true
        },
        //点击一键重置
        rest() {
            this.$refs.state.value = ''
            this.$refs.build.value = ''
            this.$refs.unit.value = ''
            this.$refs.floor.value = ''
            this.$refs.room.value = ''
        },
        //点击查询按钮
        query() {
            this.isShow = false
            this.pages = 0
            this.page = 0
            const serach = {}
            if (this.$refs.state.value) {
                serach.Status = this.$refs.state.value
            }
            if (this.$refs.build.value) {
                serach.Building = this.$refs.build.value
            }
            if (this.$refs.unit.value) {
                serach.UnitName = this.$refs.unit.value
            }
            if (this.$refs.floor.value) {
                serach.FloorNumber = this.$refs.floor.value
            }
            if (this.$refs.room.value) {
                serach.RoomNumber = this.$refs.room.value
            }

            this.filterRoom = this.OwnerRoom.filter(room => {
                // 检查Status是否匹配
                if (serach.Status && room.Status !== serach.Status) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 检查Building是否匹配
                if (serach.Building && room.BuildingName !== serach.Building) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 检查UnitName是否匹配
                if (serach.UnitName && room.UnitName !== serach.UnitName) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 检查FloorNumber是否匹配
                if (serach.FloorNumber && room.FloorNumber !== serach.FloorNumber) {
                    console.log(777777);

                    return false; // 如果不匹配，则排除该房间
                }
                // 检查RoomNumber是否匹配
                if (serach.RoomNumber && room.RoomNumber.toString() !== serach.RoomNumber.toString()) {
                    return false; // 注意：这里将RoomNumber转换为字符串进行比较，因为原始数据中可能是数字
                }
                // 如果所有条件都匹配或为空（表示用户没有为该字段指定筛选条件），则返回true以包含该房间
                return true;

            })
        },
        //查看
        handleInfo(index, row) {
            console.log(index);
        },
        //查看
        handleLook(index, row) {
            this.dialogFormVisible = true
            this.infoForm.build = row.BuildingName
            this.infoForm.unit = row.UnitName
            this.infoForm.floor = row.FloorNumber
            this.infoForm.room = row.RoomNumber
            this.infoForm.cardType = row.TypeID
            this.infoForm.cardID = row.CardNum
            this.infoForm.addDate = row.AddDate
            this.infoForm.addMan = row.AddMan
        },
        //编辑
        handleEdit(index, row) {
            console.log(index, row);
        },
        //删除
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val);
        },
        ...mapActions(['getList', 'getBuild']),
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogVisible = false
                })
                .catch(_ => { });
        },
        onSubmit(formName) {

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    for (let item in this.form) {
                        console.log(this.form[item])
                    }
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                } else {
                    return false;
                }
            });
        }
    },
    mounted() {
        if (this.allData.length == 0) {
            //执行仓库的数据请求
            this.getList()
            this.getBuild()
        }
    },
    computed: {
        ...mapState(['allData', "householdCount", "moveInCount", 'moveCount', "OwnerRoom"])
    }
}
</script>

<style scoped>
.top-btn{
    display: flex;
}
.top-btn span {
    line-height: 30px;
}

.bottom>>>.el-table {
    min-height: 500px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.dialog>>>input {
    width: 217px;
}

/* .dialog>>>.el-dialog {
    margin-top: 0 !important;
} */

.el-dialog__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn {
    margin-top: 20px;
    text-align: right;
    padding-right: 120px;
}

.btn>>>.el-button--default {
    height: 32px;
    width: 94px;
    padding: 0;
    margin-right: 20px;
}

.dialog>>>.el-form {
    margin-top: 20px;
    padding: 0 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.dialog-title {
    font-size: 14px;
    color: #000;
    padding-bottom: 15px;
    border-bottom: 1px solid #cacaca;
}

.table-item {
    width: 180px;
}

.table-item p:nth-child(1) {
    margin-bottom: 15px;
}

.table-title {
    display: flex;
    height: 78px;
    align-items: center;

}

.bottom-table {
    padding: 0 40px 80px;
    background: #fff;
    border-radius: 4px;
    margin-left: 20px;

}

.table-item p {
    font-size: 12px;
    color: #666;
}

.bottom-table>>>.has-gutter th {
    background: #f2f2f2;
}



.bottom-table>>>.cell {
    text-align: center;
}

.bottom-menu {
    background: #fff;
    /* height: 100vh; */
}

.menu {
    font-size: 12px;
    color: #666;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
}

.bottom {
    display: flex;
    width: 100%;
    margin-top: 10px;
}

.bottom-table {

    width: 80%;

}

.bottom-menu {

    width: 20%;

}

.top-btn .el-button+.el-button {
    margin-left: 25px;
}

.top {
    background: #fff;
    padding: 20px 35px;
    border-radius: 4px;
}

.top-btn {
    margin-top: 20px;
}

.top-btn button {
    min-width: 82px;
    height: 30px;
    padding: 0 20px;
}

.top-ipt li {
    display: flex;
    align-items: center;
    margin-right: 50px;
}

/* .top-ipt li p {
    margin-right: 15px;
} */

.top-ipt>>>.el-input__inner {
    width: 150px;
    height: 30px;
    line-height: 30px;
}

.top-ipt>>>.el-input__icon {
    line-height: 30px;
}

.top-ipt>>>.el-select .el-input.is-focus .el-input__inner {
    border-color: #DCDFE6;
}

.top-ipt>>>.el-select .el-input__inner:focus {
    border-color: #DCDFE6;
}

.top-ipt {
    font-size: 13px;
    color: #666;
    display: flex;
}

.content {
    padding: 10px 30px 0;
    background: #f0f3f8;
    height: 100vh;
    width: 100%;
}
</style>